.skinitem {
          width:3em;height:3em;border-radius:50%;margin:0 auto;
         }
           
    html {
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        * {
            background: transparent;
        }
        header {
            background: none;
        }

        .mui-content,
        .mui-slider,
        .mui-slider,
        .mui-table-view,
        .mui-grid-view.mui-grid-9 {
             background: rgba(0,0,0,0);
        }

        .mui-off-canvas-left,
        .mui-off-canvas-right {
            background-color: #000000;opacity: 0.8;color: #fff;
        }

        .mui-grid-view.mui-grid-9 {
            opacity: 1;border-top: 1px solid rgba(0,0,0,0.1);
        }
        .mui-bar { 
              background-color: #333333;
               color:white;
               -webkit-box-shadow: 0 1px 6px white;
              box-shadow: 0 1px 6px white;
        }
        .mui-bar-tab {
             
        }
         .mui-bar-tab .mui-tab-item .mui-icon {
           color:white;
         }

        .mui-grid-view.mui-grid-9 .mui-table-view-cell { 
             border-right: 1px solid rgba(0,0,0,0.1);border-bottom: 1px solid rgba(0,0,0,0.1);background-color: #fff;
          }

        body {
             
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed; 
            background-color:#f5f5f5;
            color:dark;
        }
        #ListSkinPanel{
             
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed; 
            background-color:#f5f5f5;
            color:dark;
        }

        .mui-content {
            height: 100%;
        }
        
       
    .mui-off-canvas-left, .mui-off-canvas-right {
    background-color: #fff;
    opacity: 1;    
    }
     .mui-pull { 
     color: dark;
   } 
    .shake {
            -webkit-transform-origin: center center;
            -webkit-animation-name: shake-rotate;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
        }

        .shakecontainer .img-container img {
            border: 1px solid #CCCCCC;
            border-radius: 6px; 
        }

        .shakecontainer .img-content {
            display: none;
        }

        .shakecontainer .img-remove,
        .shakecontainer .img-index {
            display: block;
        }

        ul li[draggable=true] {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
        }

            ul li[draggable=true] > div {
                -webkit-animation-name: none;
            }

            ul li[draggable=true] .img-remove,
            ul li[draggable=true] .img-index {
                display: none;
            }

        .sort-handle {
            cursor: move;
            cursor: -webkit-grabbing;
        }

        .sort-ghost {
            opacity: 0;
        }

        .sort-chosen {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            transition: transform .3s;
            -webkit-transition: transform .3s;
        }

            .sort-chosen:last-child {
                transition: none;
                -webkit-transition: none;
            }

        @-webkit-keyframes shake-rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }

            12.5% {
                -webkit-transform: rotate(1.25deg);
            }

            25% {
                -webkit-transform: rotate(2.5deg);
            }

            37.5% {
                -webkit-transform: rotate(1.25deg);
            }

            50% {
                -webkit-transform: rotate(0deg);
            }

            62.5% {
                -webkit-transform: rotate(-1.25deg);
            }

            75% {
                -webkit-transform: rotate(-2.5deg);
            }

            87.5% {
                -webkit-transform: rotate(-1.25deg);
            }

            100% {
                -webkit-transform: rotate(0deg);
            }
        }

        @media only screen and (min-width: 16.05rem) and (max-width: 18.75rem) {
            ul {
                margin-left: 8%;
            }
        }

         .mt-icon {
            text-align: center;
            overflow: hidden;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            line-height: 2.5rem; 
            padding: 0.1rem; 
            
        color:#333333;font-size:2.5rem;
       
        }
         .mt-icon-o {
            text-align: center;
            overflow: hidden;
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 50%;
            line-height: 1.25rem; 
        
              background-color:rgba(255, 255, 255, 0.1);   border-radius: 10%; color:rgba(255, 255, 255,1);font-size:2.5rem;
             
        }

           .mt-icon-m {
            text-align: center;
            overflow: hidden;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            line-height: 2rem; 
    
              background-color:rgba(255, 255, 255, 0.1);   border-radius: 10%;color:#666;font-size:1.75rem; 
         
        }

          .mt-icon-s {
            text-align: center;
            overflow: hidden; 
            border-radius: 50%;
            line-height: 1rem; 
           padding: 0.15rem; 
            /*  background-color:rgba(255, 255, 255, 0.1);   border-radius: 10%;*/ color:#c7c7cc;font-size:0.6rem;
     
        }
        .mt-order-list .mt-icon-s{
            line-height: 40px;
        }

        .mt-menu-font {
        }
        
          .mt-icon img{
             width: 2.0rem;
            height: 2.0rem;
            overflow: hidden;
            padding: 0;
            margin: 0;
            border: 0;
          }
          
             .mt-icon-o img{
             width: 2.0rem;
            height: 2.0rem;
            overflow: hidden;
            padding: 0;
            margin: 0;
            border: 0;
          }
          
             .mt-icon-m img{
              width: 1.5rem;
              height: 1.5rem;
              overflow: hidden;
              padding: 0;
              margin: 0;
              border: 0;
          }
          
             .mt-icon-s img{
               width: 1.5rem;
              height: 1.5rem;
              overflow: hidden;
              padding: 0;
              margin: 0;
              border: 0;
          }

        .mt-menu-item {
            display: block;
            position: relative;
            padding: 5px 0 0 0;
        }

        .mt-menu-remove {
            display: none;
            position: absolute;
            top: 0.2rem;
            left: 0.2rem;
            color: white;
            background: #101010;
            border-radius: 50%;
            font-size: 0.7rem;
            border: 1px solid white;
            font-weight: 1000;
            height: 0.8rem;
            width: 0.8rem;
            line-height: 0.7rem;
            text-align: center;
        } 
         .mt-menu-badge-m {
             display: none; 
            width: 1rem;
            height: 1rem;
            font-size: 0.5rem;
            line-height: 1rem;
            padding: 0.05rem;
            color: #fff;
            background: #f43530;
            border-radius: 50%;
            position: absolute;
            top: 0%;
            right: 0.75rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mt-menu-badge-o {
            display: none;
            width: 1rem;
            height: 1rem;
            font-size: 0.5rem;
            line-height: 1rem;
            padding: 0.05rem;
            color: #fff;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0%;
            right: 0.75rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mt-menu-badge {
             display: none; 
            width: 1rem;
            height: 1rem;
            font-size: 0.5rem;
            line-height: 1rem;
            padding: 0.05rem;
            color: #fff;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 10%;
            right: 0.75rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mt-menu-title {
           
            display: block;
            width: 100%;
            height: 0.75rem;
            text-overflow: ellipsis; 
            font-weight: 800;
            /*background-color:rgba(155, 155, 155, 0.8);*/color:#333;font-size:0.7rem; 
        } 
        
        .mt-menu-title-m {
            
            line-height:0.9rem; 
            width: 100%;
            height:1rem;
            text-overflow: ellipsis; 
            font-weight: 800;
            position: relative;
            padding: 0 0 0.5rem 0.5rem;
            top: -0.2rem;
            /*background-color:rgba(155, 155, 155, 0.8);*/color:#666;font-size:0.7rem;
 
        }  
        .mt-menu-title-o {            
            line-height:0.9rem; 
            width: 100%;
            height:1rem; 
            font-weight: 800;
            position: relative;
            padding: 0 0 0 0;
            top: -0.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            
            /*background-color:rgba(155, 155, 155, 0.8);*/color:#333;font-size:0.7rem;
      
            
        }   
          .mt-menu-title-s { 
            line-height:0.9rem; 
            width: 100%;
            height:1rem;
            text-overflow: ellipsis; 
            font-weight: 800;
            position: relative;
            padding: 0 0 0.5rem 0.5rem;
            top: -0.2rem;
            /*background-color:rgba(155, 155, 155, 0.8);*/color:rgba(255, 255, 255,1);font-size:0.7rem;
     
        }  

        .mt-order-title {
            display: flex;
            height: 2.75rem;
            width: 100%; 
            border-bottom: 1px solid rgba(200, 200, 200, 0.3);
        }

        
        .mt-order-list {
            min-height: 3rem;
            width: 100%;
            margin: 0 auto;
            background-color:rgba(255, 255, 255, 1);
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            margin-top: 10px;
            
        } 

        .mt-order-title-item {
            flex: 1;
        }

            .mt-order-title-item:first-child {
                float: left;
                text-indent: 0.5rem;
                font-size:0.9375rem;
                line-height: 2.75rem;
                padding-left: 12px;
            }

            .mt-order-title-item :last-child {
                float: right;
                padding-right: 0.5rem;
            }

                .mt-order-title-item:last-child a {
                    color: #999;
                    line-height: 2.75rem;
                    font-size: 0.8125rem;
                }
        .order-state{
            display: table;
            width: 100%;
            height: 4.875rem;
            padding: 0;
            table-layout: fixed;
            border-top: 0;
            border-bottom: 0;
            z-index:10;
            margin-left:0;
            margin:0;
            padding:0.15rem 0;
            background-color:rgba(255, 255, 255, 0.5);
            position: relative;
        }
        .order-state li{
            display: table-cell;
            overflow: hidden;
            width: 1%;
            height: 2rem;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
            text-overflow: ellipsis;
            color:rgba(255, 255, 255, 0.4);
        }
        .order-state li.mui-tab-item a{
            color:#535f69;
        }

        .order-state li .mui-tab-label{
            font-size: 0.7rem;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mt-wrap-content {
            display: flex; 
            width: 100%; 
            flex-direction:column;
            
        }

          .mt-wrap-column {
              flex: 1;
              height: 50%;
               position: relative;
             
        }
          .AllMenuList {
              margin-top: 0.5rem;
              position: relative;

          } 
           
  .icon .cart{
      margin-top:0.25rem;
  }

.pull-left {
  float: left
}

.pull-right {
  float: right
}
  
    
     
         .mui-bar-tab .mui-tab-item.mui-active {
           color:#fff;
        }
        
        .mui-bar-tab .mui-tab-item {
   
           color:rgba(255, 255, 255, 0.4);
        } 
      
        
        .mui-bar a:active {
            color:white;
         }
        .mui-bar a  {
           color:white;
         }
           .mui-bar p  {
           color:white;
         }
         .mui-bar {
                 background-color: #333333;
               color:white;
               -webkit-box-shadow: 0 1px 6px white;
              box-shadow: 0 1px 6px white;
         } 
     header {
        color:white;
         background-image: linear-gradient(103deg,#333333 0%, #333333 63%, #333333 97%);  
        background-color:#333333;
        background-size: 100%;
        border: 0px none rgb(0, 0, 0);
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-transform: translateZ(0);  
          
         color:rgba(255, 255, 255, 0.90);
        
     }
     .mui-title { 
         
         color:rgba(255, 255, 255, 0.90);
        
      } 
      .mui-bar .mui-icon:active {
         color:rgba(255, 255, 255, 0.90);
       }
      .mui-bar-nav.mui-bar .mui-icon {
        color:rgba(255, 255, 255, 0.90);
      }
      .mui-bar .mui-icon { 
      }
      
      
        
      
         .mt-userinfo {
            height: 12rem;
            width: 100%; 
            background-size: 100% 100%;
        }

        .mt-head {
            width: 4rem;
            height: 4rem; 
            border-radius: 50%;
            margin: 0 auto;
            position: relative;
            top: 0.75rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            flex-direction: column;
            -webkit-flex-direction:column;
        }

        .mt-head-info {
            margin: 0 0 0 0.3rem;
            flex: 4;
           -webkit-flex: 4;
           -moz-box-flex: 4;
            
        }
        .mt-head-menu {
            margin: 0 0 0 0.3rem;
            flex: 1;
           -webkit-flex: 1;
           -moz-box-flex: 1;
            
        }

        .mt-head-name {
            width: 100%;
            height: 1.25rem;
            line-height: 1.25rem;
            margin: 0;
            padding: 0.25rem;
            font-size: 1rem;
            font-weight: 800;
            color: #fff;
            text-align: center;
        }

        .mt-head-item {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            margin: 0;
            padding: 0;
            font-size: 0.9rem;
            font-weight: 400;
            color: #fff;
            text-align: center;
        }

        .mt-head-Brands {
            min-width: 10rem;
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            margin: 0;
            padding: 0;
            font-size: 0.7rem;
            font-weight: 400;
            color: #fff;
            text-align: center;

        }


        .mt-head-logo {
            width: 100%;
            height: 100%;
            min-height: 4rem;
            min-width: 4rem; 
            box-sizing: border-box;
            border-radius: 50%;
            flex: 1;
            justify-content: center;
            align-items: center;
             border: solid 5px rgba(255, 255, 255,1);
        } 

        .mt-head-logo2 {
            width: 100%;
            height: 100%;
            min-height: 2rem;
            min-width: 2rem;
            border: solid 2px #fad4b9;
            box-sizing: border-box;
            border-radius: 50%;
            flex: 1;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 4rem;
            height: 4rem;
            position: absolute;
            top: 0px;
            left: 0px;
            border-radius: 50%;
           
            opacity: .2;
            background: none;
            -webkit-animation: spinnering 1.5s infinite linear;
             -moz-animation: spinnering 1.5s infinite linear; 
             -o-animation: spinnering 1.5s infinite linear; 
            animation: spinnering 1.5s infinite linear;
            -webkit-animation-delay: .5s;
             -moz-animation-delay: .5s; 
            -o-animation-delay: .5s; 
            animation-delay: .5s;
            border: solid 5px rgba(255, 255, 255,1);
            
        }


        .spinner-title {
            width: 1.75rem;
            height: 1.75rem;
            position: absolute;
            top: 0px;
            left: 0px;
            border-radius: 50%;
            border: solid 2px #fad4b9;
            opacity: .2;
            background: none;
            -webkit-animation: spinnering 1.5s infinite linear;
            animation: spinnering 1.5s infinite linear;
            -webkit-animation-delay: .5s;
            animation-delay: .5s;
        }




        @keyframes spinnering {
            0% {
                
                -webkit-transform:scale(0.99);
                -moz-transform: scale(0.99);
                 -ms-transform: scale(0.99);
                 -o-transform:scale(0.99);
                  transform:scale(0.99);

                opacity: 0;
            }

            5% {
                opacity: 1;
            }

            100% { 
                 -webkit-transform:scale(1.2);
                -moz-transform: scale(1.2);
                 -ms-transform:scale(1.2);
                 -o-transform:scale(1.2);
                  transform:scale(1.2);
                opacity: 0;
                border: solid 10px #ffffff;
            }
        }

        .packupingout {
            -webkit-animation: spinnering 1s forwards ease-in-out;
            animation: packuping-out 1s forwards ease-in-out;
            -webkit-animation-delay: 0;
            animation-delay: 0;
        }

        @keyframes packuping-out {
            0% {
                -webkit-transform: scale(1.2);
                transform: scale(1.2);
                opacity: 1;
            }

            5% {
                opacity: 0.7;
                margin: 0px;
            }

            100% {
                -webkit-transform: scale(0.3);
                transform: scale(0.3);
                opacity: 0;
                top: -3rem;
                left: -1rem;
                margin: 0px;
            }
        }




        .packupingin {
            -webkit-animation: spinnering 1s forwards ease-in-out;
            animation: packuping-in 1s forwards ease-in-out;
            -webkit-animation-delay: 0;
            animation-delay: 0;
        }

        @keyframes packuping-in {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
                top: -2rem;
                left: -1rem;
            }

            5% {
                opacity: 0.8;
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
                margin: 0px;
                top: 0.5rem;
                left: 40%;
            }
        }

        #mt-menu {
            margin: 0.5rem;
        }

        #mt-head-play {
            z-index: 20;
            display: block;
            position: fixed;
            background-color: transparent;
            width: 5rem;
            height: 5rem;
            top: -9rem;
        }
         
         
         @media screen and (max-height:480px) {
        .mt-order-title-item:first-child {
        float: none;
        }
        .mt-order-title {
        display: block;
        }
        }